<template>
    <div class="wrap">
         <div class="wrap-top">
         	 <img src="../assets/home_icon_recommend@2x.png" style="display: block; width: 0.37333rem;height: 0.37333rem;"/>
         	 <span>今日推荐</span>
         </div>
         <div class="wrap-bottom">
         		<div class="out" v-bind:class="[ {'right': (index %3 ==2)},{'noBottom': (todayRecommends.length <=3)} ]"  v-for="(item,index) in todayRecommends"  @click='toBuy(item.equityCode)'>
         			<p>{{item.equityName}}</p>
         			<p>{{item.equityCode}}</p>
         			<p class="red" :class="color(item.risePrice)" >{{item.lastPrice }} <img :src="img(item.risePrice)"/></p>
         			<p class="red" :class="color(item.risePrice)">
         				<span>{{item.risePrice | toDe}}</span>
         				<span>{{item.risePre | toDe2}}</span>
         			</p>
         		</div>
         		
         </div>
    </div>
</template>
<script>
	import home from '@/api/home/index'
	import { toast} from '@/util/index'
export default {
	data(){
		return{
			todayRecommends:[],
			green:false,
			clearTime:""
			
		}
	},
	filters:{
    	toDe(num){
    		if(num>0){
    			return "+"+num;
    			
    		}else{
    			return num;
    		}
    	},
    	toDe2(num){
    		if(num>0){
    			return "+"+num+"%";
    			
    		}else{
    			return num+"%";
    		}
    	}
    },
	methods:{
		setTime() {
	        this.clearTime=setInterval(() => { 
	            this.init();
	        }, 1000)
		},
		color(value) {
	        if(value.substring(0,1)=='-'){
	        	//this.img = require('../assets/fall.png');
	        	return "green";
	        } 
	   },
	   img(value) {
	        if(value.substring(0,1)=='-'){
	        	return require('../assets/fall.png');
	        }else{
	        	return require('../assets/rise.png');
	        }
	   },
	   toBuy(num){
		     this.$router.push({
	            path: '/tAdd1/', 
	            name: 'tAdd1',
	            query: { 
	                "stockNum": num
	            }
	           
	        })
	   },
	   init(){
		    let senddata = {
		    	plat:"mlj"
		    }
			home.equityRecommend(senddata).then((res) => {
				if (res.data.code == 200) {
					this.todayRecommends=res.data.data.todayRecommends;
				}else if(res.data.code==222){
		            this.$router.push({path:'/login'})
		        } else {
					/*toast(res.data.message)*/
				}
			})
	   }
	   
	},
	
	mounted() {
		this.setTime();
 },
    destroyed () {
	  clearInterval(this.clearTime);
	}
}
</script>
<style lang="less" scoped>
@import '../less/config.less';
.wrap {
    background-color: @liBg;
    color: @fcolor;
    width: 100%;
    height: auto;
    padding: 0 @p30;
   
     margin-bottom:0.26667rem;
     .wrap-top{
     	height: .8rem;
     	line-height: .8rem;
     	display: flex;
     	justify-content: center;
     	align-items: center;
     	
     	border-bottom: 1px solid #262934;
     	span{
     		color:#ffc519  ;
     		margin-left: 0.1733rem;
     	}
     	
     }
    .wrap-bottom{
    	display: flex;
    	align-items: center;
    	flex-wrap:wrap;
    	justify-content:flex-start;
    	.out{
    		padding:@p30 0;
    		width: 33.3%;
    		border-bottom: 1px solid #262934;
    		p{
    			text-align:center;
    			height: 0.5333rem;
    			line-height: 0.5333rem;
    			border-right: 1px solid #262934;
    			img{
    				width: 0.213rem;
    				height: @fsize;
    			}
    		}
    		.red{
    			color: #ff335b;
    		}
    		.green{
    			color: #33ffc3;
    		}
    	}
    	.right{
    		p{
    			border-right: none;
    		}
    		
    	}
    	.noBottom{
    		border-bottom:none;
    	}
    	.one{
    		border: none;
    	}
    	
    }
}
</style>
